import {
  DockviewReact,
  DockviewReadyEvent} from "dockview";
import * as React from "react";

import 'dockview/dist/styles/dockview.css';
import './App.css';
import { Menu } from "./components/Menu";
import { Panel } from "./components/Panel";


const components = {
  panel: Panel,
};

const tabComponents = {
  menu: Menu,
};

export const App: React.FC = (props: { theme?: string }) => {
  const onReady = (event: DockviewReadyEvent) => {
    const panel = event.api.addPanel({
      id: "panel_1",
      component: "panel",
      tabComponent: "menu",
    });
  };

  return (
    <DockviewReact
      components={components}
      tabComponents={tabComponents}
      onReady={onReady}
      className={props.theme || "dockview-theme-abyss"}
      singleTabMode="fullwidth"
    />
  );
};

export default App;
